<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>

    // 数组的方法: 官方提供的专门操作数组的方法  -> 所有的数组均可以使用
    // 语法:
    // 数组.方法名();


    // 学习数组的方法需要注意:
    // 1. 基本功能(有什么用)
    // 2. 结果(方法的返回值)
    // 3. 是否影响原数组 (有些方法直接操作原数组 , 有些方法返回新数组)

    // 数组中元素的 增 删 改 查


    // push()  尾部新增 -> 在数组的尾部新增一个或多个元素(多个元素用逗号分隔)
    // 返回值:新增元素后数组的长度
    // 是否影响原数组: 影响

    // var list = [1, 2, 3];

    // var result = list.push("y");  //  4

    // console.log("返回值:", result);  // 4
    // console.log("原数组:", list);  // [1, 2, 3, 'y']

    // var list = [1, 2, 3];

    // var result = list.push("y", "q", "w", "e");  //  7

    // console.log("返回值:", result);  // 4
    // console.log("原数组:", list);  // [1, 2, 3, 'y', 'q', 'w', 'e']


    // unshift()  头部新增 -> 在数组的头部新增一个或多个元素(多个元素用逗号分隔)
    // 返回值:新增元素后数组的长度
    // 是否影响原数组: 影响

    /* var list = [1, 2, 3];

    var result = list.unshift("x");

    console.log("返回值:", result);  // 4
    console.log("原数组:", list);  // ["x", 1, 2, 3]
     */



    // pop()  尾部删除 (在数组的尾部删除一个元素)
    // 返回值: 被删除的元素
    // 是否影响原数组: 影响

    /* var list = [1, 2, 3, 4];

    var result = list.pop();

    console.log("返回值:", result); // 4

    console.log("原数组:", list); // [1,2,3]

    var result = list.pop();

    console.log("返回值:", result); // 3

    console.log("原数组:", list); // [1,2] */


    // shift()  头部删shift在数组的头部删除一个元素)
    // 返回值: 被删除的元素
    // 是否影响原数组: 影响

    // 注意: 前面的元素被删除之后 后面的元素批量向前移动 占据被删除的元素的位置 => 数组塌陷


    /* var list = [1, 2, 3, 4];

    var result = list.shift();

    console.log("返回值:", result); // 1

    console.log("原数组:", list); // [2,3,4]

    var result = list.shift();

    console.log("返回值:", result); // 2

    console.log("原数组:", list); // [3,4] */


    // splice() 数组的增删改

    // (1) splice(startIndex,n) 任意位置删除  => 自下标为startIndex的位置开始,删除n个元素
    // 返回值: 被删除的元素形成的新数组
    // 是否影响原数组: 影响

    // var list = [1, 2, 3, 4, 5, 6, 7, 8];

    // var result = list.splice(3, 2);

    // console.log("返回值:", result);

    // console.log("原数组:", list);


    // (2) splice(startIndex,0,arg1,arg2...argN) 任意位置新增  => 自下标为startIndex的位置开始,删除0个元素,再新增一个或多个元素(自第三参数开始 都是新增的元素)
    // 返回值: 被删除的元素形成的新数组  => 没删 []
    // 是否影响原数组: 影响

    // var list = [1, 2, 3, 4, 5, 6, 7, 8];

    // var result = list.splice(3, 0, "x", "y");

    // console.log("返回值:", result);  // []

    // console.log("原数组:", list);


    // (3) splice(startIndex,n,arg1,arg2...argN) 任意位置修改  => 自下标为startIndex的位置开始,删除n个元素,再新增一个或多个元素(自第三参数开始 都是新增的元素)
    // 返回值: 被删除的元素形成的新数组
    // 是否影响原数组: 影响

    // var list = [1, 2, 3, 4, 5, 6, 7, 8];

    // var result = list.splice(3, 2, "x", "y");

    // console.log("返回值:", result);  // [4,5]

    // console.log("原数组:", list); // [1, 2, 3, "x", "y", 6, 7, 8]


    // 查
    // includes()   判断数组中是否存在某个元素
    // 返回值: 存在 => true  不存在 => false
    // 是否影响原数组: 不影响

    /* var list = [1, 2, 3, 4, 5, 6, 7, 8];

    var result = list.includes(4);

    console.log("返回值:", result);  // true

    console.log("原数组:", list); // [1, 2, 3, 4, 5, 6, 7, 8]


    var result = list.includes("4");

    console.log("返回值:", result);  // false

    console.log("原数组:", list); // [1, 2, 3, 4, 5, 6, 7, 8] */

    // indexOf()   判断某个元素在数组中第一次出现的位置
    // 返回值: 存在 => 下标  不存在 => -1 
    // 是否影响原数组: 不影响

    // indexOf() 也可以变相用于判断数组中是否存在某个元素

    // 存在 数组.indexOf(元素) != -1         数组.indexOf(元素) >= 0 
    // 不存在 数组.indexOf(元素) == -1         

    var list = [1, 2, 3, 4, 5, 6, 4, 8];

    var result = list.indexOf(4);

    console.log("返回值:", result);  // 3

    console.log("原数组:", list); // [1, 2, 3, 4, 5, 6, 7, 8]


    var result = list.indexOf("4");

    console.log("返回值:", result);  // -1

    console.log("原数组:", list); // [1, 2, 3, 4, 5, 6, 7, 8]












</script>

</html>